﻿using SharpKit.JavaScript;
using SharpKit.jQuery;
using SharpKit.jQuery.UI;
using SharpKit.jQuery.UI.Controls;

namespace WebDesigner.Templates
{

    [JsType(JsMode.Json)]
    class RGB
    {
        public JsNumber R { get; set; }
        public JsNumber G { get; set; }
        public JsNumber B { get; set; }
    }
    [JsType(JsMode.Prototype, Name="ColorPickerClient")]
    class ColorPickerClient : jQueryContext
    {
        public static void Load()
        {
            var options = new SliderOptions
            {
                orientation = "horizontal",
                range = "min",
                max = 255,
                value = 127,
                slide = RefreshPreview,
                change = RefreshPreview
            };
            SliderRed = new Slider("#red", options);
            SliderGreen = new Slider("#green", options);
            SliderBlue = new Slider("#blue", options);
            ColorSliders = new[] { SliderRed, SliderGreen, SliderBlue };

            SliderAll = new Slider("#all", new SliderOptions
            {
                orientation = "horizontal",
                range = "min",
                max = 255,
                value = 127,
                slide = OnSliderAllChange,
                change = OnSliderAllChange
            });
            LastSliderAllValue = 127;

            SliderRed.value = 255;
            SliderGreen.value = 140;
            SliderBlue.value = 60;
        }

        public static JsString GetColorPickerValue()
        {
            var hex = RgbToHex(SliderRed.value, SliderGreen.value, SliderBlue.value);
            return "#" + hex;
        }
        public static void SetColorPickerValue(JsString value)
        {
            var hex = CssColorToRgb(value);
            SliderRed.value = hex.R;
            SliderGreen.value = hex.G;
            SliderBlue.value = hex.B;
        }
        public static void RefreshPreview()
        {
            J("#swatch").css("background-color", GetColorPickerValue());
            if (ColorPickerValueChanged != null)
                ColorPickerValueChanged();
        }
        public static JsAction ColorPickerValueChanged { get; set; }

        static JsArray<Slider> ColorSliders;
        static Slider SliderAll;
        static Slider SliderRed;
        static Slider SliderGreen;
        static Slider SliderBlue;
        static JsNumber LastSliderAllValue;

        static JsString RgbToHex(JsNumber r, JsNumber g, JsNumber b)
        {
            var hex = new[]{
			r.toString(16),
			g.toString(16),
			b.toString(16)
            }.As<JsArray>();
            jQuery.each(hex, (nr, val) =>
            {
                if (val.As<JsString>().length == 1)
                {
                    hex[nr] = "0" + val;
                }
            });
            return hex.join("").toUpperCase();
        }
        static RGB CssColorToRgb(JsString value)
        {
            if (value == null)
                return new RGB();
            if (value.indexOf("rgb")==0)
            {
                JsFunc<JsNumber, JsNumber, JsNumber, RGB> rgb = (r, g, b) => new RGB { R = r, G = g, B = b };
                var rgb2 = eval(value).As<RGB>();
                return rgb2;
            }
            else if (value.charAt(0)=="#")
                return HexToRGB(value.substr(1));
            throw new JsError("NotSupported CssColorToRgb(" + value + ")").As<System.Exception>();
        }
        static RGB HexToRGB(JsString value)
        {
            return new RGB 
            { 
                R = parseInt(value.substring(0, 2), 16),
                G = parseInt(value.substring(2, 4), 16),
                B = parseInt(value.substring(4, 6), 16) 
            };
        }
        static void OnSliderAllChange()
        {
            var value = SliderAll.value;
            var diff = value - (LastSliderAllValue ?? value);
            LastSliderAllValue = value;
            if (diff != 0)
            {
                foreach (var slider in ColorSliders)
                {
                    var val = slider.value;
                    var newVal = val + diff;
                    if (newVal > 255 || newVal < 0)
                        return;
                }
                foreach (var slider in ColorSliders)
                {
                    slider.value +=diff;
                }
            }
        }

    }


}